<template>
    <el-tabs v-model="activeTag">
        <el-tab-pane label="添加单词" name="wordAddTAG">
            <el-form ref="wordAddRef" :model="wordAdd" :rules="rules" label-width="100px" size="medium" >
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="课程类型" prop="courseParentId">
                            <el-select v-model="wordAdd.courseParentId" placeholder="请选择课程类型" @change="courseChangeEvent" style="width:100%">
                                <el-option v-for="item in parentCourseData" :key="item.value" :label="item.label" :value="item.value"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="课程" prop="courseId">
                            <el-select v-model="wordAdd.courseId" placeholder="请选择课程" style="width:100%">
                                <el-option v-for="item in childCourseData" :key="item.value" :label="item.label" :value="item.value"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="中文意思" prop="zhWord">
                            <el-input v-model="wordAdd.zhWord" placeholder="请输入中文意思"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="日文含汉字" prop="riWord">
                            <el-input v-model="wordAdd.riWord" placeholder="请输入日文含汉字,没有汉字可以忽略"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>   
                    <el-col :span="12">
                        <el-form-item label="日文假名" prop="riWordKana">
                            <el-input v-model="wordAdd.riWordKana" placeholder="请输入纯假名的日文"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="单词标签" prop="wordTagId">
                            <el-select v-model="wordAdd.wordTagId"  placeholder="请选择单词所属标签"  style="width:100%">
                                <el-option label="名词" value="9"/>
                                <el-option label="一类动词" value="1"/>
                                <el-option label="二类动词" value="2"/>
                                <el-option label="三类动词「动名词」" value="3"/>
                                <el-option label="い形词" value="5"/>
                                <el-option label="な形词" value="4"/>
                                <el-option label="副词" value="8"/>
                                <el-option label="名、副词" value="12"/>
                                <el-option label="动、名、副" value="13"/>
                                <el-option label="な形容词、副词" value="17"/>
                                <el-option label="连体词" value="10"/>
                                <el-option label="接续词" value="11"/>
                                <el-option label="语法" value="6"/>
                                <el-option label="寒暄语" value="7"/>
                                <el-option label="指示词" value="14"/>
                                <el-option label="疑问词" value="15"/>
                                <el-option label="感叹词" value="16"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24" style="display:grid;place-items:center;">
                        <el-button :type="recorderExist == true?'primary':'success'" circle icon="el-icon-mic" @mousedown.native="startRecord" @mouseup.native="stopRecord"></el-button>
                        <b v-if="recorderExist == true" style="margin-top:10px;color: deepskyblue;">重新录入单词发音</b>
                        <b v-else="recorderExist == true" style="margin-top:10px;color: seagreen;">录入单词发音</b>
                    </el-col>
                </el-row>
            </el-form>
        </el-tab-pane>
    </el-tabs>
</template>



<script>
export default {
    props: {
        wordAdd: {
            type: Object,
            required: true,
        },
        rules: {
            type: Object,
            required: false,
        },
        roleList: {
            type: Array,
            required: false
        },
        //渲染主课程的数据
        parentCourseData :{
            type: Array,
            required: true
        },
        //渲染子课程的数据
        childCourseData :{
            type: Array,
            required: true
        }
    },
    data() {
        return {
            activeTag: "wordAddTAG",
            isPermanent: false,
            expirationTime: this.wordAdd.expirationTime,
            PERMANENT: "", 
            recorderExist:false
        }
    },
    methods: {
        //重置表单
        reset() {
            this.$refs.wordAddRef.resetFields();
        },
        //校验表单
        validate() {
            let checkResult = true;
            this.$refs.wordAddRef.validate((valid) => {
                checkResult = valid;
            })
            let entity = { ...this.wordAdd }
            if (this.PERMANENT) {
                entity.expirationTime = this.PERMANENT
            } else {
                entity.expirationTime = this.expirationTime
            }
            return { checkResult, entity }
        },
        //添加语法
        addYF(){
            this.wordAdd.demos.push({id:undefined,conent:undefined});
        },
        //删除语法
        delYF(index){
            this.wordAdd.demos.splice(index,1)
        },
        beforeDestroy() {
            this.reset();
        },
        //开启录音
        startRecord(){
            if(this.wordAdd.riWord){
                this.$recorder.startRecording(this.wordAdd.riWord);
            }else{
                this.$message.error('请先录入单词');
            }
        },
        //停止录音
        stopRecord(){
            if(this.wordAdd.riWord){
                this.$recorder.stopRecording();
                this.recorderExist = true;
            } 
        },
        //课程数据改变
        courseChangeEvent(v){
            this.$emit('updateCourseChange',v,'add')
        },
    },
}
</script>

<style scoped lang="scss">
.el-checkbox {
    padding-left: 30px;
}

.bb{
    padding-left: 10px; 
}
</style>